<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#EEEEEE"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">我的互动</view>
    </view>
    <!-- 主体 -->

    <scroll-view
      :style="{
        height: '100%',
      }"
      :scroll-y="true"
      class="scroll_view"
    >
      <view class="box">
        <u-subsection
          :list="list"
          :current="current"
          @change="changeItem"
          fontSize="16"
          bgColor="rgba(39,39,39,0.5)"
          inactiveColor="#ADADAD"
          activeColor="#EEEEEE"
          :bold="false"
        ></u-subsection>

        <u-search
          shape="round"
          :showAction="false"
          class="input_view"
          bgColor="rgba(39,44,41,0.5)"
          @clear="clear"
          v-model="value"
        ></u-search>

        <view class="title">我的关注（{{ data.total }}）</view>
        <view v-if="current == 0">
          <view class="item" v-for="item, index in data.data" :key="index">
            <view class="item_left" v-if="item.guser">
              <view class="item_left_img">
                <image :src="item.guser.avatar_url"></image>
              </view>
              <view class="item_left_name">{{ item.guser.nick_name }}</view>
            </view>
            <view class="item_right" v-if="item.is_guanzhu" @click="guanFn(item.user_id,'guan')">已关注</view>
            <view class="item_right_guan" @click="guanFn(item.user_id,'guan')"  v-else >
              <u-icon name="plus" color="#EEEEEE" size="13"></u-icon>
              关注
            </view>
          </view>
        </view>
        <view v-else>
          <view class="item" v-for="item, index in data.data" :key="index">
            <view class="item_left" v-if="item.user">
              <view class="item_left_img">
                <image
                  :src="item.user.avatar_url"
                ></image>
              </view>
              <view class="item_left_name">{{item.user.nick_name}}</view>
            </view>
            <view class="item_right" v-if="item.is_guanzhu" @click="guanFn(item.user_id,'beiguan')">已关注</view>
            <view class="item_right_guan" v-else @click="guanFn(item.user_id,'beiguan')">
              <u-icon name="plus" color="#EEEEEE" size="13"></u-icon>
              关注
            </view>
          </view>
        </view>
      </view>

      <view class="empty_view" v-if="data.data && data.data.length == 0">
        <image
          class="item_left_clickable"
          src="../../static/images/my/kong.png"
          mode=""
        ></image>
        <view v-if="current == 0">暂无关注的用户~</view>
        <view v-else>暂无被关注的用户~</view>
      </view>

    </scroll-view>
	<floatingBall></floatingBall>
  </view>
</template>
  
  <script>
export default {
  components: {},

  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      isHeadBack: false,
      list: ["关注", "被关注"],
      current: 0,
      flag: 1,
      value: "",
      data: {},
      user_id:''
    };
  },
  onLoad(options) {
    this.user_id = options.user_id;
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    if (this.current == 0) {
      this.getGuanList();
    } else {
      this.getBeiGuanList();
    }
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    click() {
      event.preventDefault();
    },
    clear() {
      this.value = "";
    },
    changeItem(index) {
      this.current = index;
      if (this.current == 0) {
        this.getGuanList();
      } else {
        this.getBeiGuanList();
      }
    },
    // 关注列表
    getGuanList() {
      this.$http
        .userMyGuanzhu({ user_id: this.user_id,hideLoading:true })
        .then((res) => {
          this.data = res.data.list;
          console.log(this.data, "关注列表");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 被关注列表
    getBeiGuanList() {
      this.$http
        .userBeiGuanzhu({ user_id: this.user_id,hideLoading:true })
        .then((res) => {
          this.data = res.data.list;
          console.log(this.data, "被关注列表");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 关注/取消关注
    guanFn(user_id,str){
      this.$http
        .userGuanzhu({ user_id: user_id,hideLoading:true })
        .then((res) => {
          uni.$u.toast(res.message);
          if(str == 'guan'){
            this.getGuanList()
          } else {
            this.getBeiGuanList()
          }
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    }
  },
};
</script>
  
  <style scoped lang="scss">
.content {
  // background: #F7F8FA;
  box-sizing: border-box;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  z-index: -10;
  display: flex;
  flex-direction: column;
}
.scroll_view {
  height: 100%;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}
.box {
  padding: 38rpx;
  box-sizing: border-box;
  .u-subsection {
    padding: 8rpx;
    border-radius: 44rpx;
    height: auto;
    /deep/.u-subsection__item {
      border-radius: 36rpx;
      overflow: hidden;
      height: 72rpx;
      // padding: 30rpx 0;
      .u-subsection__item__text {
      }
    }
  }
  /deep/.u-subsection__bar {
    border-radius: 36rpx !important;
    overflow: hidden;
    background: #55b877;
    // height: 38rpx;
  }

  /deep/.input_view {
    height: 80rpx;
    margin-top: 40rpx !important;
    .u-search__content__input {
      background: none !important;
    }
  }

  .title {
    margin: 40rpx 0;
    font-size: 32rpx;
    color: #eeeeee;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32rpx;
    .item_left {
      display: flex;
      align-items: center;
      .item_left_img {
        width: 100rpx;
        height: 100rpx;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      .item_left_name {
        margin-left: 24rpx;
        font-size: 32rpx;
        color: #eeeeee;
      }
    }
    .item_right {
      background: rgba(173, 173, 173, 0.102);
      border-radius: 32rpx;
      border: 1rpx solid #adadad;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #adadad;
      padding: 10rpx 48rpx;
    }
    .item_right_guan {
      background: #55b877;
      border-radius: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #eeeeee;
      padding: 10rpx 48rpx;
      .u-icon {
        margin-right: 10rpx;
      }
    }
  }
}
.empty_view {
    margin-top: 300rpx;
    image {
      margin: 0 auto;
      width: 410rpx;
      height: 410rpx;
    }
    view {
      font-size: 30rpx;
      color: #d8d8d8;
      text-align: center;
    }
  }
</style>